<template>
  <div class="app-hotDetails">
        <div v-for="(val, key) in hotDetails" :key="key" class="app-hotDetails_box">
          <div class="img">
            <img :src="val.image" alt="#">
          </div>
          <div class="hotDetails_data">
            <p class="title">{{val.word}}</p>
            <div class="advantages">
              <span v-text="val.word_1"></span>
              <span>丨</span>
              <span v-text="val.word_2"></span>
              <span>丨</span>
              <span v-text="val.word_3"></span>
            </div>
            <div class="preferential">
              满十用一
            </div>
            <div v-text="`已拼` + val.number + `万件`" class="haveBuy"></div>
            <div class="money">
              <span>￥</span>
              <span v-text="val.money" class="prices"></span>
              <span class="buyNow">立即开拼</span>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
export default {
  name: 'vertical',
  data() {
    return {
      hotDetails: [],
    };
  },
  created() {
    // eslint-disable-next-line no-underscore-dangle
    this.$http._commodity()
      .then((res) => {
        this.hotDetails = res.data.num;
      });
  },
};
</script>

<style scoped lang="scss">
  .app-hotDetails{
      .app-hotDetails_box{
        width: 1165px;
        height: 538px;
        border-radius: 35px;
        background: white;
        font-size: 0;
        margin: 0 auto 30px;
        .img,.hotDetails_data{
          display: inline-block;
          font-size: 35px;
          vertical-align: middle;
        }
        .img{
          margin: 35px;
          width: 446px;
          height: 446px;
          img{
            border-radius: 15px;
            width: inherit;
            height: inherit;
            object-fit: cover;
          }
        }
        .hotDetails_data{
          width: 615px;
          height: 464px;
          .title{
            font-size: 45px;
            font-weight: bold;
          }
          .advantages{
            line-height: 109px;
            span{
              color: #999999;
              font-size: 35px;
            }
          }
          .preferential{
            display: block;
            width: 170px;
            line-height: 60px;
            border-radius: 20px;
            background: #fbede4;
            font-size: 30px;
            text-align: center;
            color: #e06431;
          }
          .haveBuy{
            line-height: 107px;
            color: #969696;
          }
          .money{
            span{
              color: #e76a58;
              font-size: 32px;
            }
            .prices{
              font-size: 50px;
            }
            .buyNow{
              display: inline-block;
              width: 221px;
              line-height: 71px;
              background: #eb5642;
              font-size: 37px;
              color: white;
              text-align: center;
              border-radius: 30px;
              float: right;
            }
          }
        }
      }
    }

</style>
